<script setup>
import { reactive, ref, watch, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useCurrentWatchStore } from '@T2/store/users.ts';
import { loadBMapGLScript, getMaskOverlay } from '@T2/utils/BMapGL_API.ts';
import { mapStyle } from './mapStyle.js';
import { deepCopy } from '@T2/utils/utils.ts';
import NormalPNG from '@T2/assets/maps/buoy-normal.png';

const currentWatchStore = useCurrentWatchStore();
const projectList = deepCopy(currentWatchStore.getProjectsOfValidMenus)?.filter(i => +i.x && +i.y);

let maps = {}, unitList = [];
const Resd = reactive({
  goHomes: 0,
  sensors: [],
  unitList: [],
});
const sensors = ref([]);
onMounted(async () => {
  const flag = true;
  // const flag = import.meta.env.MODE !== 'development';
  if (!window.BMapGL) {
    await loadBMapGLScript();
  }
  flag && mapsInit();
});
let resetHome = {
  center: {},
  zoom: 11,
};
watch(() => Resd.goHomes, (nv, ov) => {
  maps.centerAndZoom(resetHome.center, resetHome.zoom);
});
const mapsInit = () => {
  
  maps = new window.BMapGL.Map('map_container', { minZoom: 10 });
  
  let viewPort = {
    center: {lat: 31.13, lng: 121.1},
    zoom: 10,
  }
  if (projectList.length) {
    viewPort = maps.getViewport(projectList.map(item => new window.BMapGL.Point(+item.x, +item.y)));
    viewPort.zoom = viewPort.zoom > 16 ? 16 : viewPort.zoom;
  }
  maps.centerAndZoom(viewPort.center, viewPort.zoom);
  resetHome.center = maps.getCenter();
  resetHome.zoom = maps.getZoom();
  maps.setMapStyleV2({styleJson: mapStyle});
  getMaskOverlay('上海市', 1).then(res => {
    res?.mapmasks?.forEach(item => maps.addOverlay(item));
    res?.borders?.forEach(item => maps.addOverlay(item));
  });
  maps.setTilt(0);    // 设置地图倾斜角
  maps.setHeading(0); // 设置地图倾斜角
  maps.enableKeyboard();
  maps.enableScrollWheelZoom();
  maps.enableInertialDragging();
  maps.enableContinuousZoom();
  maps.setDisplayOptions({ poi: true, poiIcon: false});
  projectList.forEach(item => {
    let icon = new window.BMapGL.Icon(NormalPNG, new window.BMapGL.Size(1, 1));
    let marker = new window.BMapGL.Marker(new window.BMapGL.Point(+item.x, +item.y), { icon: icon });
    addClickHandler(marker, item);
    maps.addOverlay(drawMarker(marker, item));
  });
}
const addClickHandler = (marker, item) => {
  marker.addEventListener('click', function (e) {
    openInfoWindow(item);
  });
}
const drawMarker = (marker, item) => {
  setTimeout(() => {
    let eleIcon = document.createElement('div');
    // eleIcon.className = item.online ? item.warn_number > 0 ? 'map-buoy alarm' : 'map-buoy' : 'map-buoy offline';
    eleIcon.className = item.warn_number > 0 ? 'map-buoy alarm' : 'map-buoy';
    marker.domElement.appendChild(eleIcon);
  }, 100);
  return marker;
}

const detail = reactive({
  data: null,
  dom: null,
});

const openInfoWindow = (item) => {
  let point = new window.BMapGL.Point(+item.x, +item.y);
  let content = `<div class="openTips" id="tipsUnitID${ item.id }"></div>`;
  let infoWindow = new window.BMapGL.InfoWindow(content, {
    width: 0,   //自动调整
    height: 0,  //自动调整
    enableCloseOnClick: false,
    offset: new window.BMapGL.Size(-29, 0), //默认的一个引导箭头,宽58px,高31px,往左偏移一半宽度
  });
  maps.openInfoWindow(infoWindow, point);
  setTimeout(() => {
    detail.dom = document.getElementById(`tipsUnitID${ item.id }`);
  }, 50);
  detail.data = item;
}


</script>

<template>
  <div id="map_container" class="BMap_container"></div>
  
  <teleport :to="detail.dom" v-if="detail.dom && detail.data">
    <div class="c-card card">
      <div class="card-header flex--center">
        <label>{{ detail.data.name }}</label>
      </div>
    </div>
  </teleport>
</template>

<style lang="scss" scoped>
@use '@T2/styles/BMap.scss';
.BMap_container {
  width: 100%;
  height: 100%;
  background-color: rgb(242,242,242);
}
.card {
  background-color: #fff;
  min-height: 100px;
  width: 100%;
  pointer-events: auto !important;
}
.card-header {
  padding: 8px 12px 0;
  label {
    font-weight: 500;
    font-size: 16px;
    color: #252525;
    margin-left: 6px;
    position: relative;
    &::before {
      content: '';
      position: absolute;
      left: -6px;
      top: 50%;
      transform: translateY(-50%);
      width: 2px;
      height: 15px;
      background: linear-gradient( 180deg, #0648D2 0%, #3F92FA 100%);
    }
  }
  .btns {
    margin-left: auto;
  }
}
</style>
<style scoped>
:deep(.BMap_bubble_pop) {
  transform: translateY(calc(31px + 31px - 50px));
}
:deep(.map-buoy) {
  position: absolute;
  transform: translateX(-50%) translateY(-50px);
  width: 42px;
  height: 50px;
  background: url('@T2/assets/maps/buoy-normal.png') no-repeat center;
  background-size: 100% 100%;
}
:deep(.map-buoy.alarm) {
  background: url('@T2/assets/maps/buoy-normal.png') no-repeat center;
  background-size: 100% 100%;
}
:deep(.map-buoy.offline) {
  background: url('@T2/assets/maps/buoy-normal.png') no-repeat center;
  background-size: 100% 100%;
}
:deep(.openTips) {
  pointer-events: auto !important;
  width: calc(100vw - 24px);
  height: 185px;
  overflow: hidden;
  z-index: 1000;
}
</style>